\<template>
  <Layout class="p-5 bg-white">
    <Form class="p-5" :model="user" :label-width="80">
      <Row>
        <Col span="8">
          <FormItem class="w-100" label="账号">
            <Input v-model="user.account" />
          </FormItem>
          <FormItem class="w-100" label="密码">
            <Input v-model="user.password" />
          </FormItem>
          <FormItem class="w-100" label="电话">
            <Input v-model="user.tel" />
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem class="w-100" label="身份证">
            <Input v-model="user.secId" />
          </FormItem>
          <FormItem class="w-100" label="创建时间">
            <label>{{ user.ct }}</label>
          </FormItem>
        </Col>
        <Col span="8">
          <!--修改-->
          <FormItem class="" label="角色">
            <CheckboxGroup v-model="user.roleIds">
              <Checkbox v-for="(item, index) in roles" :label="item.roleId">{{
                item.roleName
              }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Col>
      </Row>

      <FormItem>
        <Button @click="submit" type="primary">提交</Button>
        <Button @click="cancel" style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
	<Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
	  isSpinShow: false,
      user: {
        nickName: '',
        password: '',
        roleIds: [],
      },
      userId: 0,
      roles: [],
      allRoles: [],
    }
  },
  destroyed: function() {
    this.$router.push({
      name: 'user',
    })
  },
  methods: {
    getAllRole: function() {
      //获取所有的角色
      this.http
        .get({
          url: '/role/list',
          param: {},
        })
        .then((data) => {
          this.$data.roles = data
        })
    },
    cancel: function() {
      this.$tabs.close()
    },
    submit: function() {
      let self = this

      //将List<Integer> 转化成以逗号分隔的字符串 [1,2,3,4]  ---> 1,2,3,4
      var s1 = ''
      for (let item in this.user.roleIds) {
        var s1 = s1.concat(this.user.roleIds[item] + ',')
      }

      let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))

      var submitPOJO = {
        'user.userId': this.$route.params.userId,
        'user.account': this.user.account,
        'user.password': this.user.password,
        'user.tel': this.user.tel,
        'user.secId': this.user.secId,
        roleIds: s1.substr(0, s1.length - 1),
        'user.uu': currentUser.user.userId,
      }
      this.isSpinShow = true
      this.http
        .put({
          url: '/user/',
          param: submitPOJO,
        })
        .then(() => {
		  this.isSpinShow = false
          self.message.info('修改成功')
          this.$tabs.close()
        })
    },
    init: function() {
      this.search()
    },
    searchUser: function() {
      let self = this
      this.http
        .get({
          url: '/user/info',
          param: {
            userId: self.$data.user.userId,
          },
        })
        .then((data) => {
          self.user = data.user
          for (let jndex in self.allRoles) {
            let role = self.allRoles[jndex]
            role.has = false
            for (let index in data.roles) {
              let roleItem = data.roles[index]
              if (roleItem.roleId == role.roleId) {
                role.has = true
                this.roles.push(role)
              }
            }
          }
        })
    },
    search: function() {
      let self = this
      this.http
        .get({
          url: '/role/all',
        })
        .then((data) => {
          self.$data.allRoles = data
        })
        .then(() => {
          self.searchUser()
        })
    },
  },

  created: function() {
    this.getAllRole()
  },
  mounted: function() {
    this.$data.user.userId = this.$route.params.userId
    //根据userId获取角色信息及其权限
    this.http
      .get({
        url: '/user/info/' + this.$route.params.userId,
        param: {},
      })
      .then((data) => {
        //初始化表单信息
        this.user.account = data.user.account
        this.user.password = data.user.password
        this.user.tel = data.user.tel
        this.user.secId = data.user.secId				
        this.user.ct = data.user.ct.replace("T"," ");
        //初始化用户的角色复选框选中状态
        for (let item in data.userRoleList) {
          this.user.roleIds.push(data.userRoleList[item].roleId)
        }
      })
  },
}
</script>

<style></style>
